<template>
	<tip-list title="项目基本情况" :class="{headclass:headclassBol}">
		<div class="public-form inner-container">
			<div class="clearfix search-header">
				<ul class="input list clearfix">
					<li>
						<my-tooltip text="项目名称"></my-tooltip>
						<div class="box">
							<el-input v-model="searchFrom.name" placeholder="请输入项目名称"></el-input>
						</div>
					</li>
					<div style="height:65px;padding:5px 0px 0px 0px;margin-bottom:18px;float:right">
						<el-button @click="reset" style="float:right;width:120px">重置</el-button>
						<el-button type="primary" @click="queryList()" style="float:right;margin-right:20px;width:120px">查询</el-button>
					</div>
				</ul>
			</div>
			<el-table :data="tableData" style="width: 100%" :height="tableHeight">
				<el-table-column type="index" label="序号" width="70" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="name" label="项目名称" width="200" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="address" label="建设内容及规模" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="personName" label="计划开工时间" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="personPhone" label="计划竣工时间" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="areaName" label="总投资" width="100" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="location" label="年度计划投资" width="120" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="remark" label="年度工程形象进度" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="location" label="施工单位名称" width="150" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="remark" label="施工单位联系电话" show-overflow-tooltip>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="150">
					<template scope="row">
						<el-button @click="pass(row)" type="text" size="small">
							通过
						</el-button>
						<el-button @click="unpass(row)" type="text" size="small">
							不通过
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="page" v-show="total">
				<el-pagination :current-page="searchFrom.page" :page-size="searchFrom.pageSize" @size-change="handleSizeChange" @current-change="pageChange" layout="total,prev, pager, next,jumper" :total="total">
				</el-pagination>
			</div>
		</div>
	</tip-list>
</template>
<script>
	export default {
		components: {
		},
		created() {
			this.queryList()
			this.eventBus.$on('streetUpdate', () => {
				this.queryList(true)
			})
			this.eventBus.$on('streetAdd', () => {
				this.queryList(true)
			})
		},
		mounted() {
			setTimeout(() => {
				this.headclassBol = true;
			}, 500)
			//分辨率宽度大于等于1920table高度自适应
			if($(window).width() >= 1920) {
				//得到初始高度
				let contentHeight = $('.content').height(),
					wrapListHeight = $('.view-box-header').height(),
					warpBoxHigeht = $('.list').height(),
					typeBoxHigeht = $('.typeClass').height(),
					pageHigeht = $('.page').height();
				this.tableHeight = contentHeight - wrapListHeight - warpBoxHigeht - typeBoxHigeht - pageHigeht - 120
				console.log(wrapListHeight, warpBoxHigeht, contentHeight, pageHigeht, typeBoxHigeht, this.tableHeight)
				//计算显示高度
				var timer = null;
				$(window).resize(() => {
					clearTimeout(timer)
					timer = setTimeout(() => {
						let contentHeight = $('.content').height(),
							wrapListHeight = $('.view-box-header').height(),
							warpBoxHigeht = $('.list').height(),
							typeBoxHigeht = $('.typeClass').height(),
							pageHigeht = $('.page').height();
						this.tableHeight = contentHeight - typeBoxHigeht - wrapListHeight - warpBoxHigeht - pageHigeht - 120
					}, 200)
				})
			} else {
				this.tableHeight = "";
			}
		},
		destroyed() {
			//移除监听
			$(window).unbind()
			},
			data() {
					return {
						headclassBol: false,
						searchFrom: {
							page: 1,//页码
					pageSize: 15, //每页条数
					type: 0, //类型，0街道，1商场，2景点
					name: '', //名称
					order: "createTime desc"
				},
				total: 0, //总条数
				tableHeight: '', //table高度
				tableData: [],
				showdetail: false, //显示dialog状态
				showEdit: false,
				showDialogId: '', //显示对于dialogID
			}
		},
		methods: {
			queryList(type) {
				/*如果是点击查询，页码初始化为1*/
				if(type && this.searchFrom.page != 1) {
					this.searchFrom.page = 1
					return false
				}
				this.ajax({
					url: 'Point/Query',
					data: this.searchFrom
				}).then(data => {
					this.total = data.total
					this.tableData = data.row
				})
			},
			//通过
			pass(data){
				
			},
			//不通过
			unpass(data){
				
			},
			pageChange(val) {
				this.searchFrom.page = val
				this.queryList()
			},
			//输入页码跳转
			handleSizeChange() {
				this.searchFrom.page = val
				this.queryList()
			},
			reset() { //查询框重置
				this.searchFrom.name = '', //名称
					this.queryList();
			}
		}
	}
</script>
<style lang="less" scoped>
	.headclass {
		width: 99%;
	}
	
	.public-form {
		.search-header {
			position: relative;
			.search-btn {
				position: absolute;
				top: 4px;
				right: 0;
			}
		}
		ul.input {
			float: left;
			// padding-right: 200px;
			// margin-left:-25px;
			width: 100%;
			li {
				float: left;
				width: 20%;
				padding: 5px 0 5px 20px;
				margin-bottom: 5px;
				span {
					float: left;
					width: 80px;
					line-height: 36px;
					display: block;
					text-indent: 5px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.box {
					width: 100%;
					padding-left: 100px;
				}
			}
		}
	}
</style>
<style lang="less">
	.public-form {
		.desc {
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			white-space: nowrap;
		}
		.el-form-item__label {
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			white-space: nowrap;
		}
		.el-textarea__inner {
			height: 87px;
		}
		.el-date-editor.el-input {
			width: 100%;
		}
		.el-select {
			width: 100%;
		}
	}
</style>